<template>
  <div class="piniaTest">
    <h2>当前求和为：{{ summ }}</h2>
    <h2>当前学校为：{{ sumStore.school }}</h2>
    <br />
    <ul>
      <li v-for="talk in talkStore.talkList" :key="talk.id">
        {{ talk.content }}
      </li>
    </ul>
    <button @click="increments()">action中的increment方法</button>
    <button @click="consoles()">hhh</button>
  </div>
</template>
<script lang="ts" setup>
import { useContStore } from "../../store/count";
import { useTalkStore } from "../../store/talk";
// 从pinia导出storeToRefs
import { storeToRefs } from "pinia";
// 调用useSumStore
const sumStore = useContStore();
// 调用
const talkStore = useTalkStore();
const sums = sumStore.summ;
// 数据修改
//1.直接修改
// sumStore.summ = 100;
// 2.批量修改
// sumStore.$patch({
//   summ: 200,
//   school: "清华",
// });
// 3.使用action方法修改数据，调用action
const { summ } = storeToRefs(sumStore);
function increments() {
  sumStore.increment(1); //一次加1
}
// getters
const { upperSchool, bigSum } = storeToRefs(sumStore);
function consoles() {
  let a = upperSchool;
  let b = bigSum;
  console.log(a.value, b.value);
}

// $subscribe
// 定义一个定时器用来每隔一段时间更新一次talk.ts中的talkList，后用$subscribe监听
// setInterval(() => {
//   let na = 0;
//   talkStore.talkList.push({
//     id: (na++).toString(),
//     content: (na++).toString(),
//   });
// }, 10000);
// 通过store的$subscribe方法侦听state的变化
talkStore.$subscribe((mutate, state) => {
  console.log("LoveTalk", mutate);
  console.log("LoveTalk", state);
});
</script>
<style scoped>
.piniaTest {
  width: 80vw;
  height: 80vh;
  border: 1px solid red;
}
</style>